<template>
  <div class='container-randoms'>
    <el-card>
      <!-- 筛选 -->
      <el-form inline size="small">
        <el-form-item label="关键字">
        <el-input v-model="randoms.keyword" placeholder="根据编号搜索"></el-input>
      </el-form-item>
      <el-form-item style="float:right">
        <el-button @click="clear()">清除</el-button>
        <el-button type="primary" @click="search()">搜索</el-button>
      </el-form-item>
      </el-form>
      <!-- 总计 -->
      <el-alert :title="`数据一共${counts}条`" type="info" :closable="false" show-icon style="margin-bottom:15px"></el-alert>
      <!-- 表格 -->
      <el-table :data="randomsbiaoge">
         <el-table-column label="编号" prop="id" width="200px"></el-table-column>
         <el-table-column label="题型" width="60px">
          <template slot-scope="scope">
            {{scope.row.questionType == 1? '单选': scope.row.questionType == 2? '多选' : scope.row.questionType == 3? '简答': ''}}
          </template>
         </el-table-column>
         <el-table-column label="题目编号" width="250px">
          <template slot-scope="scope">
           <div v-for="(item, index) in scope.row.questionIDs" :key="index">
            <p class="bianlan" @click="yulan(item)">{{item.number}}</p>
           </div>
          </template>
         </el-table-column>
         <el-table-column label="录入时间">
          <template slot-scope="scope">
            {{scope.row.addTime|parseTimeByString}}
          </template>
         </el-table-column>
         <el-table-column label="答题时间(s)" prop="totalSeconds"></el-table-column>
         <el-table-column label="正确率(%)" prop="accuracyRate"></el-table-column>
         <el-table-column label="录入人" prop="userName"></el-table-column>
         <el-table-column label="操作">
         <template slot-scope="scope">
          <el-button @click="delrandoms(scope.row)" icon="el-icon-delete" circle class="button"></el-button>
         </template>
         </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      background
      layout="prev, pager, next, sizes, jumper"
      :total="counts"
      :page-size="randoms.pagesize"
      :current-page="randoms.page"
      @size-change='getsizechange'
      @current-change='getcuchange'
      :page-sizes="[20,30,50,100]"
      class="pager"></el-pagination>
    </el-card>
    <!-- 组件 -->
    <preview ref="preview" :questionItem="questionItem" :dialogVisible="dialogVisible"></preview>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import preview from '../components/questions-previewhei.vue'
export default {
  name: 'randomscard',
  data () {
    return {
      randoms: {
        // 关键字
        keyword: null,
        // 页码
        page: 1,
        // 页尺寸
        pagesize: 20
      },
      randomsbiaoge: [],
      // 总条数
      counts: 0,
      questionItem: {},
      dialogVisible: false
    }
  },
  created () {
    this.getrandoms()
  },
  methods: {
    async getrandoms () {
      const { data } = await randoms(this.randoms)
      console.log(data)
      this.randomsbiaoge = data.items
      this.counts = data.counts
    },
    getcuchange (newPage) {
      this.randoms.page = newPage
      this.getrandoms()
    },
    getsizechange (newSize) {
      this.randoms.page = 1
      this.randoms.pagesize = newSize
      this.getrandoms()
    },
    search () {
      this.randoms.page = 1
      this.getrandoms()
    },
    clear () {
      this.randoms.keyword = null
      this.randoms.page = 1
      this.getrandoms()
    },
    delrandoms ({ id }) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id })
        this.$message.success('删除成功')
        this.getrandoms()
      }
      ).catch(() => {})
    },
    async yulan (item) {
      try {
        const { data } = await detail(item)
        console.log(data)
        this.questionItem = data
        // 此处打开子组件弹窗
        this.dialogVisible = true
        // 通过refs调用子组件方法调用子组件方法
        console.log(this.questionItem, '数据')
        this.$refs.preview.fn(this.questionItem)
      } catch (error) {
        this.$message.info('数据未找到')
        return error
      }
    }
  },
  components: {
    preview
  }
}
</script>

<style scoped lang='scss'>
.container-randoms{
  margin: 15px;
  .pager{
    margin-top: 15px;
    margin-bottom: 15px;
    float: right;
  }
}
.bianlan{
  color: rgb(47, 153, 255);
}
.button{
  color: rgb(249, 152, 108);
  background-color: rgb(254, 240, 240);
}
.button:hover{
  background: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}
</style>
